<template>
  <div class="com-page-banner text-center"
    :style="{background:'url('+bannerBg+') center center no-repeat'}">
    <div class="wrapper wrapper-fixed">
      <h3 class="banner-title">{{title}}</h3>
      <p v-html="introduce"></p>
    </div>
  </div>
</template>

<script>
export default{
  props: {
    title: String,
    introduce: String,
    bannerBg: String
  }
}
</script>
<style lang="less" scoped>
@import "~assets/css/variable.less";
@import "~assets/css/mixins.less";
.com-page-banner{
  background:url(~assets/images/example/adventure_banner.jpg) center center no-repeat;
  background-size:cover;
  color:#fff;
  padding:100px 0;
  font-size:16px;
  .banner-title{
    font-size:50px;
    font-weight:normal;
    line-height:1.5;
  }
  .banner-title-small{
    font-size:32px;
    font-weight:normal;
    line-height:1.25;
    margin-bottom:0.3em;
  }
  @media screen and (max-width:1366px){
    .banner-title{font-size:48px;}
    .banner-title-small{font-size:30px;}
  }
  @media screen and (max-width:1270px){
    padding:90px 0;
    .banner-title{font-size:42px;}
    .banner-title-small{font-size:28px;}
  }
  @media screen and (max-width:1024px){
    font-size:14px;
    padding:80px 0;
    .banner-title{font-size:40px;}
    .banner-title-small{font-size:26px;}
  }
  @media screen and (max-width:768px){
    padding:100*@rpx 0;
    br{display:none;}
    p{text-align:left;}
    .banner-title{font-size:36px;}
    .banner-title-small{font-size:24px;}
  }
  @media screen and (max-width:640px){
    .banner-title{font-size:28px;}
    .banner-title-small{font-size:18px;}
  }
}
</style>



